import React, {useEffect} from 'react';
import './login.scss'
import Icon from '../icon/icon';

const QuickDeleteExample:React.FunctionComponent=()=>{
  useEffect(()=>{
    const removeHidden= function(e:Event) {
      e.stopPropagation ()
      if (e.target &&e.target.nodeName.toUpperCase()==='INPUT' && e.target.value.length > 0) {
        iconSpan1 && iconSpan1.classList.remove('re-hidden')
      }
    }
    const parent1=document.querySelector('.quick-delete-example')
    const input1=parent1&&parent1.children[1]
    const iconSpan1=parent1&&parent1.children[2]
    parent1&&parent1.addEventListener('click',(e)=>{
      input1&&input1.addEventListener('focus',removeHidden)
      input1&&input1.addEventListener('input',removeHidden)
      iconSpan1&&iconSpan1.addEventListener('click',function () {
        e.stopPropagation()
        input1&&(input1.value='')
      })
      input1&&input1.addEventListener('blur',function (e) {
        if (e.target &&e.target.nodeName.toUpperCase()==='INPUT') {
          setTimeout(()=>{iconSpan1&&iconSpan1.classList.add('re-hidden')},200)
        }
      })
    })
  },[])
  return(
    <form action="" className={'re-input-group'} style={{maxWidth:'320px'}}>
      <label>
        <div className={'re-input-row quick-delete-example'}>
          <span>快速删除</span><input type="text" className={'re-input-clear'} placeholder={'输入内容'}/>
          <span className={'re-input-icon re-hidden'}>
            <Icon name="close" />
          </span>
        </div>
      </label>

    </form>
  )
}

export default QuickDeleteExample;